<script setup>
import {onMounted, ref} from 'vue'
import axios from "axios";

onMounted(()=>{
    getCurrentDayLesson()
})
// 左侧
const activeMember = ref('teacher1')
function onSelectMember(idx) { console.log('select member', idx) }

// 中间
const randomName = ref('XXX')
const messages = ref([
    { sender: 'teacher', text: '请同学们做好上课准备！', showReaction: true,is_anonymous:false },
])
function onLike(i) { console.log('like', i) }
function onDislike(i) { console.log('dislike', i) }
function goBack() { history.back() }
const newMessage = ref('')
function sendMessage(){
    messages.value.push({
        sender: 'student',
        text:newMessage.value,
        showReaction: false,
        is_anonymous:is_anonymous.value
    })
    newMessage.value = ''
}
const is_anonymous = ref(true)
// 右侧
const currentDate = ref(new Date())


/*const test = () =>{
    const d = new Date()
    console.log(d)
    console.log(d.getDay()) // 2
    console.log(d.getMonth()+1) //5
    console.log(d.getDate()) //20
}*/
//历史课程相关
let lessons = ref([])
const getCurrentDayLesson = async () => {
    const d = new Date()
    const day = d.getDay()
    const back = await axios.get('/api/student/class/getcurrentdaylessons', {
        params: {day}
    })
    console.log(back)
    for(let i =0;i<back.data.length;i++) {
        console.log(i)
        lessons.value.push({
            'lesson':back.data[i].lesson,
            'timestamp':back.data[i].start_time+'-'+back.data[i].end_time
        })

    }
}
const handelClickDate = async () =>{
    const day = currentDate.value.getDay()
    const back = await axios.get('/api/student/class/getcurrentdaylessons', {
        params: {day}
    })
    console.log(back)
    lessons.value=[]
    for(let i =0;i<back.data.length;i++) {
        console.log(i)
        lessons.value.push({
            'lesson':back.data[i].lesson,
            'timestamp':back.data[i].start_time+'-'+back.data[i].end_time
        })

    }
}
//24小时助手

//查询所有课程
</script>
<template>

    <el-container class="page-container">
        <!-- ========== 左侧栏 ========== -->
        <el-aside width="240px" class="sidebar">
            <div class="header">
                <el-button type="text" icon="ArrowLeft" @click="goBack" />
                <span class="class-title">信管一班</span>
            </div>

            <el-card class="member-card" shadow="never">
                <h4>班级成员</h4>
                <el-menu class="member-menu" :default-active="activeMember" @select="onSelectMember">
                    <el-menu-item index="teacher1">老师1（班主任）<i class="el-icon-user-solid float-right"/></el-menu-item>
                    <el-menu-item index="student1">学生1（班长）<i class="el-icon-user-solid float-right"/></el-menu-item>
                    <el-menu-item index="student2">学生2（学习委员）<i class="el-icon-user-solid float-right"/></el-menu-item>
                    <el-menu-item index="student3">学生3<i class="el-icon-user-solid float-right"/></el-menu-item>
                    <el-menu-item index="student4">学生4<i class="el-icon-user-solid float-right"/></el-menu-item>
                    <el-menu-item index="student5">李杭杭<i class="el-icon-user-solid float-right"/></el-menu-item>
                </el-menu>
            </el-card>

            <el-card class="history-card" shadow="never">
                <h4>今日课程</h4>
                <el-timeline reverse>
                    <el-timeline-item v-for="item in lessons" :timestamp="item.timestamp">{{ item.lesson }}</el-timeline-item>
                </el-timeline>
            </el-card>
        </el-aside>

        <!-- ========== 中间主内容 ========== -->
        <el-main class="main-content">

            <!-- 聊天区 -->
            <div class="chat-area">
                <!-- 随机点名 -->
                <el-badge v-if="false" class="roll-call" :value="'随机点名：'+randomName" type="info" />

                <!-- 聊天消息 -->
                <el-card
                    v-for="(msg, idx) in messages"
                    :key="idx"
                    :class="['msg-card', msg.sender]"
                    shadow="never"
                >
                    <div class="msg-header">
                        <el-avatar
                            :icon="msg.sender === 'teacher' ? 'User' : 'UserFilled'"
                            size="small"
                        />
                        <span class="msg-sender">
              {{ msg.sender === 'teacher' ? '老师' : msg.is_anonymous === true ? '学生':'李杭杭' }}
            </span>
                    </div>
                    <div class="msg-body">
                        <p>{{ msg.text }}</p>
                        <div class="msg-actions" v-if="msg.showReaction">
                            <el-button type="text" icon="ThumbUp" @click="onLike(idx)" />
                            <el-button type="text" icon="ThumbDown" @click="onDislike(idx)" />
                        </div>
                    </div>
                </el-card>
            </div>

            <!-- 输入框 -->
            <div class="input-footer">
                匿名<el-switch v-model="is_anonymous" />
                <el-input
                    v-model="newMessage"
                    placeholder="请仔细斟酌发言哦。"
                    clearable
                    @keyup.enter="sendMessage"
                />

            </div>
        </el-main>

        <!-- ========== 右侧栏 ========== -->
        <el-aside width="300px" class="right-panel">
            <!-- 上下节课提示 -->
            <div class="section section-lesson">
                <div class="lesson-label">下节课：午休</div>
            </div>

            <!-- 日历 -->
            <div class="section section-calendar">
                <h4>日期</h4>
                <el-calendar v-model="currentDate" :first-day-of-week="1" @click="handelClickDate">
                </el-calendar>
            </div>



        </el-aside>
    </el-container>
</template>


<style scoped>
.page-container {
    height: 100vh;
}

/* 左侧 */
.sidebar {
    padding: 12px;
    background: #fafafa;
    border-right: 1px solid #ebeef5;
}
.header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
.class-title {
    font-size: 18px;
    font-weight: bold;
    margin-left: 8px;
}
.member-card,
.history-card {
    margin-bottom: 16px;
}
.member-menu ::v-deep .el-menu-item {
    display: flex;
    justify-content: space-between;
    padding-right: 0;
}
.history-card h4,
.member-card h4 {
    margin-bottom: 8px;
}

/* 中间 */
.main-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.top-timeline {
    margin-bottom: 24px;
}
.chat-area {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
}
.video-card {
    margin-bottom: 16px;
    text-align: center;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}
.roll-call {
    margin-bottom: 16px;
}
.msg-card {
    margin-bottom: 12px;
}
.msg-card.teacher {
    background: #f5f7fa;
}
.msg-card.student {
    background: #fff;
    text-align: right;
}
.msg-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.msg-sender {
    margin-left: 6px;
    font-weight: 500;
}
.msg-actions {
    margin-top: 6px;
    text-align: right;
}
.input-footer {
    padding: 12px 0;
    border-top: 1px solid #ebeef5;
}

/* 右侧 */
.right-panel {
    padding: 12px;
    background: #fafafa;
    border-left: 1px solid #ebeef5;
    position: relative;
}
.section {
    margin-bottom: 24px;
}
.section-lesson {
    position: relative;
    text-align: center;
    padding: 8px 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.lesson-label {
    margin: 0 auto;
    font-weight: 500;
}
.section-calendar h4,
.section-schedule h4 {
    margin-bottom: 12px;
    font-size: 16px;
}
</style>
